<style scoped lang='less'>
    .holiday-list-mian {
        .action-cell {
            margin-bottom: 20px;
        }

        .home-list .search-block {
            display: flex;
            margin-bottom: 10px;
        }

        .input-search {
            margin-right: 10px;
            margin-bottom: 10px;
        }

        .home-list .selected-search {
            height: 200px;
            width: 100%;
            position: relative;
            border-radius: 4px;
            margin-bottom: 10px;

        }

        .home-list .selected-search .search-action {
            position: absolute;
            top: 10px;
            left: 10px;
            right: 10px;
        }

        .home-list .selected-search .selected-arr {
            position: absolute;
            top: 50px;
            left: 20px;
            right: 20px;
            bottom: 10px;
            overflow: scroll;
        }

        .home-list .select-click {
            border: 1px solid #dddee1;
            border-radius: 4px;
            padding: 10px;
            font-weight: 500;
            text-align: center;
            width: 260px;
            margin-bottom: 10px;
        }

        .home-list .selected-search .selected-arr .selected-item {
            /*border-bottom: 1px solid #dfdfdf;*/
            margin-bottom: 10px;
            font-size: 15px;
        }
    }

</style>
<template>
    <div class="holiday-list-mian">
        <!--<div class="home-list search-block">-->
        <!--<p @click="getPeopelData()" class="select-click">{{personalName}}</p>-->
        <!--<div v-if="selectPeopelIsShow" class="selected-search">-->
        <!--<div class="search-action">-->
        <!--<i-input class="input-search" placeholder="查询人姓名"></i-input>-->
        <!--</div>-->
        <!--<div class="selected-arr">-->
        <!--<template v-for="(item,index) in principalArr">-->
        <!--<p @click="choosePeople(item.id,item.personalname)" class="selected-item">-->
        <!--{{item.personalname}}</p>-->
        <!--</template>-->
        <!--</div>-->
        <!--</div>-->
        <!--&lt;!&ndash;<Button @click="searchEvent()" type="ghost" icon="ios-search">搜索</Button>&ndash;&gt;-->
        <!--</div>-->
        <Table :context="self" :data="tableData" :columns="tableColumns" stripe border></Table>
        <!--<div style="margin: 10px;overflow: hidden">-->
        <div style="float: right;">
            <Page :total="total" size="large" show-total :current="current" show-elevator show-sizer
                  @on-change="changePage"></Page>
        </div>

        <!--审核操作-->
        <Modal v-model="setCheckIsShow" title="假条审核" @on-ok="handleSubmit('formValidate')"
               @on-cancel="cancel">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="110">
                <Form-item label="审核状态" prop="state">
                    <i-select v-model="formValidate.state" placeholder="请选择审核状态">
                        <i-option value="true">通过</i-option>
                        <i-option value="false">拒绝</i-option>
                    </i-select>
                </Form-item>
                <!--<div>{{formValidate.state}}</div>-->
                <template v-if="formValidate.state == 'true'">
                    <Form-item label="通行类型" prop="crossType">
                        <i-select v-model="formValidate.crossType" placeholder="请选择审核状态">
                            <i-option value="单次进出">单次进出</i-option>
                            <i-option value="重复进出">重复进出</i-option>
                        </i-select>
                    </Form-item>
                    <Form-item label="通行的起始时间">
                        <Row>
                            <i-col span="11">
                                <Date-picker type="datetime" placeholder="选择开始日期"
                                             @on-change="changeStartDate"></Date-picker>
                            </i-col>
                        </Row>
                    </Form-item>
                    <Form-item label="通行的结束时间">
                        <Row>
                            <i-col span="11">
                                <Date-picker type="datetime" placeholder="选择结束日期"
                                             @on-change="changeEndDate"></Date-picker>
                            </i-col>
                        </Row>
                    </Form-item>
                    <Form-item v-if="isNeedUpleve" label="选择上级审核员" prop="sendToPeoples">
                        <Checkbox-group v-model="formValidate.sendToPeoples" @on-change="checkChangeUpleve">
                            <Checkbox v-for="(item,index) in principalArr" :value="item.Id" :key="index"
                                      :label="item.Personalname">
                                {{item.Personalname}}
                            </Checkbox>
                        </Checkbox-group>
                    </Form-item>
                    <Form-item label="选择允许通行门区" prop="gateInfos">
                        <Checkbox-group v-model="formValidate.gateInfos" @on-change="checkChangeGate">
                            <Checkbox v-for="(item,index) in geteListArr" :value="item.Id" :key="index"
                                      :label="item.Gatename">
                                {{item.Gatename}}
                            </Checkbox>
                        </Checkbox-group>
                    </Form-item>
                </template>
                <template v-else>
                    <Form-item label="拒绝原因" prop="reason">
                        <i-input v-model="formValidate.reason" placeholder="请输入拒绝原因"></i-input>
                    </Form-item>
                </template>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';
    import {Modal} from 'view-design';
    import selectSearch from '../../components/selectSearch';
    import baseUtil from "../../assets/utils/base-util";

    export default {
        data() {
            return {
                //上级审核员
                principalArr: [],
                geteListArr: [],
                checkerId: '',
                reqId: '',
                //审核
                setCheckIsShow: false,
                isNeedUpleve: true,
                formValidate: {
                    state: 'true',
                    reason: '',
                    gateInfos: [],
                    sendToPeoples: [],
                    startDate: '',
                    endDate: '',
                    crossType: '',
                },
                ruleValidate: {},

                //表格数据
                self: this,
                tableData: [],
                total: 0,
                current: 1,
                tableColumns: [
                    {
                        title: '请假人',
                        key: 'Reqpeople',
                        align: 'center',
                    },
                    {
                        title: '开始日期',
                        key: 'Reqstartdate',
                        align: 'center',
                    },
                    {
                        title: '返回日期',
                        key: 'Reqenddate',
                        align: 'center',
                    },
                    {
                        title: '外出地址',
                        key: 'Destination',
                        align: 'center',
                    },
                    {
                        title: '请假原因',
                        key: 'Reason',
                        align: 'center',
                    },
                    {
                        title: '请假类型',
                        key: 'Resttype',
                        align: 'center',
                    },
                    {
                        title: '审核状态',
                        key: 'State',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        // background: '#e4e4e4',
                                        // border: '1px solid #d5d5d5'
                                    },
                                    on: {
                                        click: () => {
                                            this.showCheckModal(params.row);
                                        }
                                    }
                                }, '审核')
                            ])
                        }
                    }
                ]
            }
        },
        mounted() {
            let that = this;
            this.mockTableData();
            this.getGateList();
        },
        components: {
            selectSearch
        },
        watch: {},
        component: {
            Modal
        },
        methods: {
            //跳转
            jumpPage: function (id, url) {
                //跳转
                let route = '';
                if (id.length > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }

                this.$router.push(route);
            },
            mockTableData() {
                let that = this;

                let para = {
                    // peopleId: '03508730-6f42-438d-b9e7-2465a9653519',//操作员id
                    peopleId: sessionStorage.getItem('userId'),//操作员id
                    currPage: this.current,
                    pageSize: 10,
                };
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.RestCheckList, para, function (res) {
                    that.$Loading.finish();
                    // that.total = res.Msg.TotalCount;
                    // that.current = res.Msg.CurrentPage;
                    that.tableData = res.Msg;

                    console.log('tableData:', res)
                });

            },
            /**
             * 审核
             */

            showCheckModal: function (row) {
                this.getIsNeedUpleve(row);
                this.reqId = row.Restid;
                this.checkerId = 'bc2ec5ff-3efc-48f6-81d9-634b243269b0'; //操作员id
            },
            changeStartDate: function (date) {
                console.log(date);
                this.formValidate.startDate = date;
            },
            changeEndDate: function (date) {
                console.log(date);
                this.formValidate.endDate = date;

            },
            //判断是否需要上级审核员
            getIsNeedUpleve: function (model) {
                let that = this;
                let para = {
                    id: model.Restid,
                    // id: model.Reqpersonid,
                };
                let params = that.$qs.stringify(para);
                apiUtil.get(that, apiUtil.urls.IsNeedUplevelChecker, para, function (res) {

                    if (res.Msg) {
                       that.getUpleveCheckerList(model);
                        that.isNeedUpleve = true;
                    }else {
                        that.isNeedUpleve = false;
                    }
                    that.setCheckIsShow = true;
                });
            },
            //获取上级审核人员列表
            getUpleveCheckerList: function (model) {
                let that = this;

                let para = {
                    peopleId: model.Reqpersonid,
                };

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.DefaultUplevelCheckerList, para, function (res) {
                    that.$Loading.finish();
                    that.principalArr = res.Msg;
                });
            },
            //选择门区
            checkChangeGate: function (data) {
                console.log('多选值:', data);
                let arr = Array.from(data);
                // this.formValidate.gateInfos =arr;
                console.log('checkChangeGate:', arr)

            },
            //选择上级审核员
            checkChangeUpleve: function (data) {
                console.log('多选值:', data);
                let arr = Array.from(data);
                // this.formValidate.sendToPeoples =arr;

                console.log('checkChangeUpleve:', arr)
            },
            //获取门区信息
            getGateList() {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GateServerList, para, function (res) {
                    that.$Loading.finish();

                    that.geteListArr = res.Msg;

                });
            },
            handleSubmit(name) {
                let that = this;
                let model = this.$refs[name].model;
                this.$refs[name].validate((valid) => {
                    that.comfirmModifyPS(model);
                })
            },
            comfirmModifyPS: function (model) {
                let that = this;
                console.log('model:', model);
                model.sendToPeoples = baseUtil.textByJquery(Array.from(model.sendToPeoples));
                model.gateInfos = baseUtil.textByJquery(Array.from(model.gateInfos));
                model.reqId = that.reqId;
                model.checkerId = that.checkerId;
                let params = that.$qs.stringify(model);
                apiUtil.post(that, apiUtil.urls.CheckRestRequest, params, function (res) {
                    that.$Message.info('审批操作成功 ')
                });
                console.log('params:', model)
            },

            cancel() {
                this.setCheckIsShow = false
            },
            //翻页
            changePage(row) {
                // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
                console.log("row", row);
                this.current = row;
                this.mockTableData();
            }
        },
    }
</script>
